<template>
  <el-dialog @close="close" width="900px" :title="$t('label_purchase_add_waybill_number')" append-to-body
    :visible.sync="dialogVisible">
    <ex_super_table ref="table" :model="buildTableModel" :data="rows" class="w_fill purchaseOrderCreationTable">
      <template v-slot:logisticsSupplierHeader="scope">
        <div class="flexBox">
          <ex_super_input v-model="logisticsSupplier" :placeholder="$tt('label_purchase_selective_logistics')"
            @change="e => { logisticsSupplierChange(e, scope) }" type="select" key="logisticsSupplier"
            enum="PurchaseOrderLogisticsEnum" class="w_fill" />
          <div>{{ $tt('label_purchase_waybill_number') }}</div>
        </div>
      </template>
    </ex_super_table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="submit">{{ $tt('label_confirm') }}</el-button>
      <el-button @click="dialogVisible = false">{{ $tt('label_cancel') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  components: {

  },
  props: {
  },
  data() {
    return {
      dialogVisible: false,
      logisticsSupplier: '',
      rows: []
    }
  },
  watch: {
  },
  computed: {
    buildTableModel() {
      return [
        {
          key: "code",
          label: "label_purchase_order_code",
          "min-width": 100,
          "show-overflow-tooltip": true,
        },
        {
          key: "supplierName",
          label: "label_supplier",
          "min-width": 100,
          "show-overflow-tooltip": true,
        },
        {
          key: "warehouseName",
          label: "label_warehouse_name",
          "min-width": 100,
          "show-overflow-tooltip": true,
        },
        {
          key: "totalAmount",
          label: "label_purchase_purchase_amount",
          "min-width": 100,
          "show-overflow-tooltip": true,
        },
        {
          key: "purchaseQty",
          slot_header: "logisticsSupplierHeader",
          width: 350,
          render: (h, { row, column, index }) => {
            return h('waybill_select', {
              props: {
                value: row.omsPurchaseWaybillList
              },
              on: {
                add: () => {
                  row.omsPurchaseWaybillList.push({
                    purchaseOrderId: row.id,
                    logisticsSupplier: '',
                    trackingNumber: '',
                  })
                },
                minus: e => {
                  row.omsPurchaseWaybillList.splice(e, 1)
                }
              },
            })
          }
        },
      ]
    },

  },
  created() {

  },
  mounted() {

  },
  methods: {
    show(row) {
      this.dialogVisible = true
      let item = JSON.parse(JSON.stringify(row))
      // if (!item.omsPurchaseWaybillList) item.omsPurchaseWaybillList = [{
      //   purchaseOrderId: item.id,
      //   logisticsSupplier: '',
      //   trackingNumber: '',
      // }]
      // this.rows = [item]
      this.$ajax({
        url: '/oms-api/purchase/OmsPurchaseWaybillRpc/selectByPurchaseOrderId.json',
        data: { purchaseOrderId: item.id },
        success: (res) => {
          if (res.code === 0 && res.data.rows.length !== 0) {
            item.omsPurchaseWaybillList = res.data.rows
          } else {
            item.omsPurchaseWaybillList = [{
              purchaseOrderId: item.id,
              logisticsSupplier: '',
              trackingNumber: '',
            }]
          }
          this.rows = [item]

        },
      })
    },
    submit() {
      let valid = true
      for (let index = 0; index < this.rows[0].omsPurchaseWaybillList.length; index++) {
        const element = this.rows[0].omsPurchaseWaybillList[index];
        if (!element.logisticsSupplier || !element.trackingNumber) {
          this.$message.error(this.$t('form_validate_error'))
          valid = false
          break
        }
      }
      if (valid) {
        this.$ajax({
          url: '/oms-api/purchase/OmsPurchaseWaybillRpc/saveUpdateBatch.json',
          type: "json",
          data: { waybillList: this.rows[0].omsPurchaseWaybillList },
          success: (res) => {
            this.$message.success(this.$tt('tip_operate_success'))
            this.$emit('reload')
            this.dialogVisible = false
          },
        })
      }

    },
    close() {
      this.$emit('close')
      this.logisticsSupplier = ''
    },
    logisticsSupplierChange(e, scope) {
      let arr = this.rows[0].omsPurchaseWaybillList
      arr.forEach(item => {
        item.logisticsSupplier = e
      })
    }

  },
  destroyed() {

  }
};
</script>

<style lang="less" scoped>
.flexBox {
  display: flex;
  justify-content: center;
  align-items: center;

  >div {
    flex: 1;
  }
}
</style>
